<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户注册</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 自定义样式 -->
  <style>
    body {
      background-color: #f8f9fa;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .register-container {
      max-width: 500px;
      margin: 0 auto;
    }

    .register-card {
      border-radius: 15px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      border: none;
    }

    .register-header {
      text-align: center;
      padding: 20px 0;
      border-bottom: 1px solid #eee;
    }

    .register-title {
      font-weight: 600;
      color: #333;
    }

    .form-label {
      font-weight: 500;
    }

    .btn-register {
      background-color: #0d6efd;
      border: none;
      padding: 10px;
      font-weight: 500;
    }

    .btn-register:hover {
      background-color: #0b5ed7;
    }

    .login-link {
      text-align: center;
      margin-top: 20px;
      color: #6c757d;
    }

    .login-link a {
      text-decoration: none;
      font-weight: 500;
    }

    /* 移动端优化 */
    @media (max-width: 576px) {
      .register-container {
        padding: 0 15px;
      }

      .register-card {
        border-radius: 10px;
      }
    }

    /* 表单验证样式 */
    .is-invalid {
      border-color: #dc3545 !important;
    }

    .invalid-feedback {
      display: none;
      color: #dc3545;
      font-size: 0.875em;
    }

    .was-validated .form-control:invalid ~ .invalid-feedback,
    .form-control.is-invalid ~ .invalid-feedback {
      display: block;
    }
  </style>
</head>
<body>
<div class="container register-container">
  <div class="card register-card">
    <div class="register-header">
      <h2 class="register-title">用户注册</h2>
    </div>

    <div class="card-body">
      <form id="registerForm" class="needs-validation" novalidate>
        <!-- 手机号 -->
        <div class="mb-3">
          <label for="phone" class="form-label">手机号</label>
          <input type="tel" class="form-control" id="phone" placeholder="请输入11位手机号码" required pattern="^1[3-9]\d{9}$">
          <div class="invalid-feedback">
            请输入正确的11位手机号码
          </div>
        </div>

        <!-- 邀请码 -->
        <div class="mb-3">
          <label for="inviteCode" class="form-label">邀请码（选填）</label>
          <input type="text" class="form-control" id="inviteCode" placeholder="请输入邀请码">
        </div>

        <!-- 密码 -->
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" class="form-control" id="password" placeholder="请输入6-20位密码" required minlength="6" maxlength="20">
          <div class="invalid-feedback">
            密码长度应为6-20位
          </div>
        </div>

        <!-- 确认密码 -->
        <div class="mb-3">
          <label for="confirmPassword" class="form-label">确认密码</label>
          <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码" required>
          <div class="invalid-feedback" id="confirmPasswordFeedback">
            两次输入的密码不一致
          </div>
        </div>

        <!-- 性别 -->
        <div class="mb-3">
          <label class="form-label">性别</label>
          <div class="d-flex gap-3">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="gender" id="male" value="male" checked>
              <label class="form-check-label" for="male">
                男
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="gender" id="female" value="female">
              <label class="form-check-label" for="female">
                女
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="gender" id="other" value="other">
              <label class="form-check-label" for="other">
                其他
              </label>
            </div>
          </div>
        </div>

        <!-- 出生日期 -->
        <div class="mb-4">
          <label for="birthday" class="form-label">出生日期</label>
          <input type="date" class="form-control" id="birthday" required>
          <div class="invalid-feedback">
            请选择出生日期
          </div>
        </div>

        <!-- 注册按钮 -->
        <button type="submit" class="btn btn-primary btn-register w-100">立即注册</button>
      </form>

      <div class="login-link">
        已有账号？<a href="#">立即登录</a>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 自定义验证脚本 -->
<script>
  (function() {
    'use strict';

    // 获取表单元素
    const form = document.getElementById('registerForm');
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirmPassword');
    const confirmPasswordFeedback = document.getElementById('confirmPasswordFeedback');

    // 自定义确认密码验证
    function validateConfirmPassword() {
      if (confirmPassword.value !== password.value) {
        confirmPassword.setCustomValidity('两次输入的密码不一致');
        confirmPassword.classList.add('is-invalid');
        return false;
      } else {
        confirmPassword.setCustomValidity('');
        confirmPassword.classList.remove('is-invalid');
        return true;
      }
    }

    // 实时验证确认密码
    confirmPassword.addEventListener('input', validateConfirmPassword);
    password.addEventListener('input', validateConfirmPassword);

    // 表单提交处理
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      event.stopPropagation();

      // 验证确认密码
      const isConfirmPasswordValid = validateConfirmPassword();

      // 添加验证样式
      form.classList.add('was-validated');

      // 如果表单有效
      if (form.checkValidity() && isConfirmPasswordValid) {
        // 获取表单数据
        const formData = {
          phone: document.getElementById('phone').value,
          inviteCode: document.getElementById('inviteCode').value,
          password: password.value,
          gender: document.querySelector('input[name="gender"]:checked').value,
          birthday: document.getElementById('birthday').value
        };

        console.log('注册表单数据:', formData);
        alert('注册成功！');

        // 这里可以添加实际的表单提交代码
        // submitForm(formData);
      }
    }, false);

    // 示例提交函数
    function submitForm(formData) {
      // 使用fetch或axios提交数据
      // fetch('/api/register', {
      //     method: 'POST',
      //     headers: {
      //         'Content-Type': 'application/json',
      //     },
      //     body: JSON.stringify(formData),
      // })
      // .then(response => response.json())
      // .then(data => {
      //     console.log('Success:', data);
      //     window.location.href = '/login'; // 注册成功后跳转
      // })
      // .catch((error) => {
      //     console.error('Error:', error);
      //     alert('注册失败，请重试');
      // });
    }
  })();
</script>
</body>
</html>